<template>
  <div class="groupLook">
    <header class="header">
      <i @click="goBack">返回</i>
      <p>团购看房</p>
    </header>
    <div class="list">
      <ul v-for="item in list" :key="item.communityid" class="listItem">
        <div v-if="item.state == 2">
          <button
            v-if="item.state == 0"
            class="state1"
            @click="signUp(item.communityid)"
          >
            {{ state[item.state] }}
          </button>
          <button v-else-if="item.state == 1" class="state2">
            {{ state[item.state] }}
          </button>
          <button v-else-if="item.state == 2" class="state3">
            {{ state[item.state] }}
          </button>
          <li><img :src="item.imgurl" alt="" /></li>
          <li>{{ item.communityname }}</li>
          <li>{{ item.qyname }} {{ item.housetitle }}</li>
          <li>集合地点:北京市石景山地铁站A口</li>
          <li>车牌牌号:京A34553</li>
          <li>集合时间:{{ item.firstuptimestr }}</li>
          <li>
            <span>联系电话:15248373934</span>
            <span>已报名:{{ item.pcount }}人</span>
          </li>
        </div>
        <div v-else>
          <button
            v-if="item.state == 0"
            class="state1"
            @click="signUp(item.communityid)"
          >
            {{ state[item.state] }}
          </button>
          <button v-else-if="item.state == 1" class="state2">
            {{ state[item.state] }}
          </button>
          <button v-else-if="item.state == 2" class="state3">
            {{ state[item.state] }}
          </button>
          <li><img :src="item.imgurl" alt="" /></li>
          <li>{{ item.communityname }}</li>
          <li>{{ item.qyname }} {{ item.housetitle }}</li>
          <li>
            <span>活动时间:{{ item.firstuptimestr }}</span>
            <span>已报名:{{ item.pcount }}人</span>
          </li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import { getGroupLookList } from "../../services/index";
export default {
  data() {
    return {
      list: [],
      state: ["我要报名", "已报名", "已开团"],
    };
  },
  async onShow() {
    let res = await getGroupLookList(
      "broom=&buildarea=&communityid=&decoratetype=&floortype=&heading=&keywords=&location=&nearby=&othertype=&price=&renttype=&districtids=&sqids=&lineid=&stationid=&tags=&psort=&lift=&heatingType=&buildType=&page=1&pcount=15&source=3"
    );
    // console.log(res, "res");
    if (res.status == 200) {
      let newList = [];
      for (let i = 0; i < res.data.list.length - 1; i++) {
        if (!i == 0) {
          let result = Math.floor(Math.random() * this.state.length);
          newList.push({ ...res.data.list[i], state: result });
        }
      }
      console.log(newList, "newList");
      this.list = newList;
    }
  },
  methods: {
    signUp(id) {
      let result = this.list.filter((item) => item.communityid == id);
      this.list = [
        ...this.list,
        { ...result[0].pcount++, ...result[0].state = 1 },
      ];
      console.log(this.list, "list");
    },
    goBack() {
       wx.switchTab({    //跳转到首页
           url:"/pages/index/index"
     })
    },
  },
};
</script>

<style scoped>
.groupLook {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  height: 200rpx;
  background: linear-gradient(90deg, #0e7ef3, #329ffd);
  display: flex;
  line-height: 200rpx;
  color: #fff;
  padding: 0 30rpx;
  position: sticky;
  top: 0;
  z-index: 9;
}
.header > p {
  margin-left: 180rpx;
}
.list {
  width: 93%;
  margin: 30rpx auto 0;
}
.listItem {
  width: 100%;
  position: relative;
}
.listItem > div > button {
  position: absolute;
  width: 200rpx;
  height: 70rpx;
  border-radius: 40rpx;
  font-size: 30rpx;
  color: #fff;
  top: 30rpx;
  left: 20rpx;
}
.state1 {
  background: linear-gradient(90deg, #fb9a69, #fa7166);
}
.state2 {
  background: linear-gradient(90deg, #f5cacf, #f97778);
}
.state3 {
  background: linear-gradient(90deg, #0c7bf2, #2f9bfc);
}
.listItem > div > li > img {
  width: 100%;
  height: 420rpx;
}
.listItem > div > li {
  margin: 20rpx 0;
  font-size: 30rpx;
}
.listItem > div > li:nth-child(3) {
  font-weight: bold;
  font-size: 38rpx;
}
.listItem > div > li:last-child {
  display: flex;
  justify-content: space-between;
}
</style>
